<template>
	<div>
		<el-dialog :visible.sync="dialogVisible" :show-close="false">
			<div slot="title"
				style="border-bottom: 1px solid #cbcbcb;display: flex;align-items: center;justify-content: space-between;padding-bottom: 15px;">
				<div style="font-size: 18px;color: #333;">方案投稿</div>
				<i class="el-icon-close" style="cursor: pointer;" @click="close()"></i>
			</div>

			<div>
				<el-form ref="form" :model="form" :rules="rules">
					<el-row>
						<el-col :xs="8" :sm="4" :md="4" :lg="4" :xl="4" class="form-label">
							<span><span style="color: red;">*</span>方案名称</span>
						</el-col>
						<el-col :xs="16" :sm="18" :md="18" :lg="18" :xl="18">
							<el-form-item prop="schemeName">
								<el-input v-model="form.schemeName" placeholder="方案名称"></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row>
						<el-col :xs="8" :sm="4" :md="4" :lg="4" :xl="4" class="form-label">
							<span><span style="color: red;">*</span>联系人</span>
						</el-col>
						<el-col :xs="16" :sm="6" :md="6" :lg="6" :xl="6">
							<el-form-item prop="linkmaContacts">
								<el-input v-model="form.linkmaContacts" placeholder="联系人"></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="8" :sm="{span:4,offset:2}" :md="{span:4,offset:2}" :lg="{span:4,offset:2}"
							:xl="{span:4,offset:2}" class="form-label">
							<span><span style="color: red;">*</span>联系电话</span>
						</el-col>
						<el-col :xs="16" :sm="6" :md="6" :lg="6" :xl="6">
							<el-form-item prop="relationPhone">
								<el-input v-model="form.relationPhone" placeholder="联系电话" maxlength="11"
									@input="inputChange"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="20" :offset="2">
							<el-form-item label="方案内容" prop="schemeContent">
								<div style="border: 1px solid #ccc;width:100%;line-height:21px;display: inline-block;">
									<Toolbar style="border-bottom: 1px solid #ccc" :editor="editor"
										:defaultConfig="toolbarConfig" :mode="mode" />
									<Editor v-if="dialogVisible" style="height: 300px; overflow-y: hidden;"
										v-model="form.schemeContent" :defaultConfig="editorConfig" :mode="mode"
										@onCreated="onCreated" />
								</div>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>

				<el-row>
					<el-col :span="20" :offset="2">
						<div style="display: flex;align-items: flex-end;">
							<div style="display: flex;align-items: center;">
								<span style="font-size: 14px;color: #333333;margin-right: 5px;">附件</span>
								<el-upload action="" :show-file-list="false" :http-request="httpRequest"
									:before-upload="beforeAvatarUpload">
									<el-button type="primary" plain size="small" v-loading="uploading">点击上传</el-button>
								</el-upload>
							</div>
							<span style="font-size: 12px;color: #333333;margin-left: 5px;">上传文件大小不超过10M</span>
						</div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="20" :offset="2">
						<div v-for="(item, index) in fileList"
							style="margin-top: 10px;display: flex;align-items: center;">
							<span>{{ item.file.name }}</span>
							<i class="el-icon-close" style="cursor: pointer;margin-left: 10px;"
								@click="handleRemove(index)"></i>
						</div>
					</el-col>
				</el-row>
			</div>

			<div slot="footer" v-loading="loading" style="display: flex;justify-content: center;cursor: pointer;">
				<img style="width: 138px;height: 44px;" src="@/assets/images/industryNews25.png" 
					@click="submit()">
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		Editor,
		Toolbar
	} from '@wangeditor/editor-for-vue'
	import {
		getUploadImg
	} from "@/request/api/link";
	import {
		planContributeAdd
	} from "@/request/api/planPromotion";
	import rulesUtil from "@/utils/rules" //引入
	export default {
		components: {
			Editor,
			Toolbar
		},
		data() {
			var schemeContentVal = (rule, value, callback) => {
				// console.log('schemeContentVal1',rule)
				// console.log('schemeContentVal2',value)
				if (!value || value == '<p><br></p>') {
					return callback(new Error("请输入方案内容"));
				} else {
					callback();
				}
			};
			return {
				dialogVisible: false,
				uploading: false,
				loading: false,
				form: {
					schemeName: "",
					"schemeId": "", //征集方案id
					"linkmaContacts": "", //联系人
					"relationPhone": "", //联系电话
					"schemeContent": "", //方案内容
					"accessoryDtos": [ //附件
					]
				},
				fileList: [],

				rules: {
					schemeName: [{
						required: true,
						message: '请输入方案名称',
						trigger: 'blur'
					}],
					linkmaContacts: [{
						required: true,
						message: '请输入联系人',
						trigger: 'blur'
					}],
					relationPhone: [{
						required: true,
						validator: rulesUtil.FormValidate.Form().checkTel,
						trigger: 'blur'
					}],
					schemeContent: [{
						required: true,
						validator: schemeContentVal,
						trigger: 'blur'
					}],
				},

				toolbarConfig: { //工具栏配置
					excludeKeys: [
						'insertTable', //插入表格
					]
				},
				editorConfig: {
					placeholder: '请输入内容...',
					// 所有的菜单配置，都要在 MENU_CONF 属性下
					MENU_CONF: {
						//配置上传图片
						uploadImage: {
							customUpload: this.uploadImg,
						},
						//配置上传视频
						uploadVideo: {
							customUpload: this.uploadVideo
						}
					},
				},
				editor: null,
				mode: 'default', // or 'simple'
			};
		},
		methods: {
			open(id) {
				this.dialogVisible = true
				this.form = {
					schemeName: "",
					"schemeId": id, //征集方案id
					"linkmaContacts": "", //联系人
					"relationPhone": "", //联系电话
					"schemeContent": "", //方案内容
					"accessoryDtos": [ //附件
					]
				}
				this.fileList = []
			},
			handleRemove(index) {
				// console.log('handleRemove',index)
				this.fileList.splice(index, 1)
			},
			// 关闭
			close() {
				this.$refs.form.resetFields();
				this.dialogVisible = false
			},
			// 提交
			submit() {
				// console.log('this.form',this.form);
				this.$refs.form.validate((valid) => {
					if (valid) {
						// alert('submit!');
						this.loading = true
						planContributeAdd(this.form).then((res) => {
							// console.log('res',res)
							this.loading = false
							if (res.data.code == 200) {
								this.$message.success(res.data.message);
								this.dialogVisible = false
								this.$emit('reloadData')
							} else {
								this.$message({
									message: res.data.message,
									type: "warning",
								});
							}
						}).catch((err) => {
							this.loading = false
							console.log('err', err)
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			// 只输入数字
			inputChange() {
				this.form.relationPhone = this.form.relationPhone.replace(/[^\d]/g, '')
			},
			// 选择文件
			httpRequest(option) {
				// console.log('httpRequest',option)
				this.fileList.push(option)
			},
			// 富文本
			onCreated(editor) {
				this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
			},
			// 富文本-上传图片
			uploadImg(file, insertFn) {
				let imgData = new FormData();
				imgData.append('file', file);
				//调接口，上传图片
				getUploadImg(imgData).then(response => {
					if (response.data.code == 200) {
						insertFn(response.data.message);
					} else {
						this.$message.error(response.data.message);
					}
				})
			},
			// 富文本-上传视频
			uploadVideo(file, insertFn) {
				let imgData = new FormData();
				imgData.append('file', file);
				//调接口，上传图片
				getUploadImg(imgData).then(response => {
					if (response.data.code == 200) {
						insertFn(response.data.message);
					} else {
						this.$message.error(response.data.message);
					}
				})
			},
			// 选择完成回调
			httpRequest(option) {
				// console.log('httpRequest',option)
				let imgData = new FormData();
				imgData.append("file", option.file);
				//调接口，上传图片
				this.uploading = true
				getUploadImg(imgData).then((response) => {
					this.uploading = false
					if (response.data.code == 200) {
						this.fileList.push(option)
						this.form.accessoryDtos.push({
							accessoryName: option.file.name,
							accessoryUrl: response.data.message
						})
						this.$message.success('上传成功');
					} else {
						this.$message.error(response.data.message);
					}
				}).catch(() => {
					this.uploading = false
					this.$message.error('网络异常');
				});
			},
			// 限制上传的类型
			beforeAvatarUpload(file) {
				const isLt10M = file.size / 1024 / 1024 < 10;
				if (!isLt10M) {
					this.$message.error("上传图片大小不能超过 10M!");
					return false;
				}
				// var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
				// const extension = testmsg === "jpg" || testmsg === "JPG";
				// const extension2 = testmsg === "png" || testmsg === "PNG";
				// if (!extension && !extension2) {
				// 	this.$message({
				// 		message: "上传图片只能是 jpg, png格式!",
				// 		type: "error",
				// 	});
				// 	return false;
				// }
			},
		}
	}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="less" scoped>
	/* 适用于手机的样式 */
	@media (max-width: 767px) {
		/deep/.el-dialog {
			width: 95%;
		}
	}

	.form-label {
		margin-top: 10px;
		text-align: right;
		padding-right: 15px;
	}
</style>